<script lang="ts" setup>
const props = defineProps({
  infoData: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const columns = [
  { label: '是否为ICS', prop: 'isIcs' },
  { label: 'CVE 编号', prop: 'cve' },
  { label: 'CNVD 编号', prop: 'cnvd' },
  { label: 'CNNVD 编号', prop: 'cnnvd' },
  { label: '厂商', prop: 'vendor' },
  { label: '漏洞名称', prop: 'vulName' },
  { label: '漏洞类型', prop: 'vulType' },
  // { label: '威胁类型', prop: 'threatType' },
  { label: '发布时间', prop: 'releaseTime' },
  { label: '更新时间', prop: 'updateTime' },
  { label: '风险等级', prop: 'riskLevel' },
  // { label: '版本', prop: 'version' },
  { label: '创建时间', prop: 'createTime' },
  // { label: '是否提供 PoC', prop: 'isPoc' },
  { label: 'CPE', prop: 'cpe' },
  { label: '漏洞描述', prop: 'vulDescription', },
  { label: '漏洞公告', prop: 'vulAdvisory' },
  { label: '参考链接', prop: 'refWebsite' },
]
// 特长字段使用文本域
const longField = ['cpe', 'vulDescription', 'vulAdvisory', 'refWebsite']
// 根据风险等级返回对应的样式类名
const getRiskLevelClass = (riskLevel: string) => {
  switch (riskLevel) {
    case '超危':
      return 'risk-high';
    case '中危':
      return 'risk-medium';
    case '低危':
      return 'risk-low';
    default:
      return '';
  }
}
</script>

<template>
  <jm-form label-width="auto" style="max-width: 37.5rem;">
    <jm-form-item v-for="(item, index) in columns" :key="index" :label="item.label">
      <!-- 特殊处理 isIcs 字段 -->
      <template v-if="item.prop === 'isIcs'">
        <jm-input :value="props.infoData[item.prop] ? '是' : '否'" readonly />
      </template>
      <!-- 特长字段使用文本域 -->
      <template v-else-if="longField.includes(item.prop)">
        <jm-input :value="props.infoData[item.prop]" :rows="8" type="textarea" readonly />
      </template>
      <!-- 正常字段显示 -->
      <template v-else>
        <jm-input :value="props.infoData[item.prop]" readonly
          :class="getRiskLevelClass(props.infoData[item.prop])"></jm-input>
      </template>
    </jm-form-item>
  </jm-form>

</template>
<style lang="scss" scoped>
.risk-high {
  :deep(.el-input__inner) {
    color: #b84337;
    font-weight: 700;
  }
}

.risk-medium {
  :deep(.el-input__inner) {
    color: #e3c55f;
    font-weight: 700;
  }
}

.risk-low {
  :deep(.el-input__inner) {
    color: #578dc9;
    font-weight: 700;
  }
}
</style>